<template>
  <div class="out">
    <div class="item">
      <h3 class="item__tittle">{{ change.content.shopName }}</h3>
      <ul>
        <!-- 通过change.content.productList的内容循环渲染组件 -->
        <template v-for="item in change.content.productList" :key="item._id">
          <li class="item__info">
            <img :src="item.imgUrl" alt="" class="info__img" />
            <div class="info">
              <p class="info__tittle">{{ item.name }}</p>
              <p class="info__price">
                <span class="price__icon">&yen;</span>
                <span class="price__text">{{ item.price }}</span>
                <span class="price__num">x{{ item.count }}</span>
              </p>
            </div>
            <div class="info__total">
              <span class="total__icon">&yen;</span>
              <span class="total__price">{{
                (item.price * item.count).toFixed(2)
              }}</span>
            </div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import { useContent } from "./useContent";
export default {
  name: "Item",
  setup() {
    // 从useContent方法中引入change
    const { change } = useContent();
    return {
      change,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
p,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.out {
  padding: 0.16rem;
  position: absolute;
  top: 1.8rem;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  overflow-y:auto;
}
.item {
  padding: 0.16rem 0.16rem 0;
  background-color: #fff;
  border-radius: 0.04rem;
  &__tittle {
    font-size: 0.16rem;
    height: 0.22rem;
    line-height: 0.22rem;
    margin-bottom: 0.16rem;
    margin-top: 0;
  }
  &__info {
    padding-bottom: 0.16rem;
    height: 0.46rem;
    position: relative;
    .info__img {
      width: 0.46rem;
      height: 0.46rem;
    }
    .info {
      position: absolute;
      left: 0.62rem;
      top: 0;
      &__tittle {
        height: 0.2rem;
        line-height: 0.2rem;
        color: $content-fontcolor;
        margin-bottom: 0.06rem;
      }
      .price__icon,
      .price__text,
      .price__num {
        color: $content-highlightcolor;
        margin-right: 0.04rem;
      }
      .price__icon {
        font-size: 0.12rem;
      }
      .price__text,
      .price__num {
        font-size: 0.14rem;
        line-height: 0.2rem;
      }
      &__total {
        position: absolute;
        right: 0;
        bottom: 0.16rem;
        color: #000;
        font-size: 0.14rem;
        line-height: 0.2rem;
      }
    }
  }
}
</style>